﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script language="javascript" src=jquery-1.7.1.min.js></script>
     <script language="javascript">
         $(document).ready(function () {
             $("#target").click(function () {
                 startMetroEnterEffect("target");
             });
         });

        function startMetroEnterEffect(imageID) {
            var target = $("#" + imageID);
            var timerID;
            var completeCounter = 0;
            var origImageWidth = parseInt(target.css("width"));
            var origImageHeight = parseInt(target.css("height"));
            var origWidth = parseInt(target.css("width"));
            var origHeight = parseInt(target.css("height"));
            var desWidth = $(window).width();
            var desHeight = $(window).height();
            setupMetroEnterEffect();
            function setupMetroEnterEffect() {
                target.css("position","absolute");
                timerID = setInterval(metroEnterEffectStep1, 20);
            }

            function metroEnterEffectStep1() {
                var currentWidth = parseInt(target.css("width"));
                currentWidth -= origWidth / 10;
                var currentHeight = parseInt(target.css("height"));
                currentHeight += origWidth / 10;
                var currentX = parseInt(target.css("margin-left"));
                currentX += (desWidth-origWidth)/30;
                var currentY = parseInt(target.css("margin-top"));
                currentY += (desHeight - origHeight) / 30;
                if (currentWidth <= 0) {
                    currentWidth = 0;
                    origWidth = 0;
                    origHeight = currentHeight;
                    clearInterval(timerID);
                    timerID = setInterval(metroEnterEffectStep2, 20);
                }
                else {
                    target.css("margin-left", currentX);
                    target.css("margin-top", currentY);
                }
                target.css("width", currentWidth);
                target.css("height", currentHeight);
            }

            function metroEnterEffectStep2() {
                var currentWidth = parseInt(target.css("width"));
                var currentHeight = parseInt(target.css("height"));
                currentWidth += (desWidth - currentWidth+4) / 4;
                currentHeight += (desHeight - currentHeight + 3) / 3;
                var currentX = (desWidth - currentWidth) / 2;
                var currentY = (desHeight - currentHeight) / 2;
                if (currentWidth > desWidth) {
                    currentWidth = desWidth;
                    completeCounter++;
                }
                if (currentHeight > desHeight) {
                    currentHeight = desHeight;
                    completeCounter++;
                }
                if (completeCounter == 2) {
                    clearInterval(timerID);
                    currentX = 0;
                    currentY = 0;
                }
               

                target.css("margin-left", currentX);
                target.css("margin-top", currentY);
                target.css("width", currentWidth);
                target.css("height", currentHeight);
                origImageWidth+=5;
                origImageHeight+=5;
                target.css("background-size",origImageWidth+"px "+origImageHeight+"px");
            }
        }
    </script>
    <style type="text/css">
        #target
        {
            width:120px;
            height:120px; 
            background-image:url("Images/1.png");
            background-repeat:no-repeat;
            background-position-x:center;  
            background-position-y:center;
            background-color:#00a200;
        }
    </style>
</head>
<body style="margin:0px;padding:0px">
<div id="target"></div>
<div id="Div2" style="width:100px;height:100px;background-color:#ff6a00"/>
</body>
</html>
